<template>
  <div class="app-container">
    <div class="filter-container mb20">
      社区：
      <el-select
        v-model="formdata.org_id"
        placeholder="全部"
        clearable
        class="filter-item"
        style="width: 150px"
        @change="org_change"
      >
        <el-option v-for="item in ext.org_listOptions" :key="item.id" :label="item.organ_name" :value="item.id" />
      </el-select>
      网格：
      <el-select v-model="formdata.grid_id" placeholder="请选择" clearable class="filter-item" style="width: 230px">
        <el-option v-for="item in ext.grid_listOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      小区名称：
      <el-input
        v-model="formdata.name"
        placeholder=""
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="search"
      />

      <el-button class="filter-item ml10" type="primary" icon="el-icon-search" @click="search">
        查询
      </el-button>
      <el-button class="filter-item ml10" type="warning" icon="el-icon-edit" @click="popup_edit(0)">
        添加
      </el-button>
      <router-link :to="{path:'/region/buss/personlist',query:{id:123}}">
        <el-button type="primary" size="small" icon="el-icon-edit">
          跳转1
        </el-button>
      </router-link>
      <el-button size="small" type="primary" icon="el-icon-edit" @click="toRouter">
        跳转2
      </el-button>
    </div>
    <div class="tbl-list">
      <el-table border fit highlight-current-row :data="result.rows">
        <el-table-column align="center" label="编号" width="95">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>

        <el-table-column label="小区名称" min-width="110">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column label="所属社区" min-width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.organ_name }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="organ_name" label="所属社区" min-width="60" align="center" />

        <el-table-column label="所属网格" min-width="60" align="center">
          <template slot-scope="scope">
            {{ scope.row.grid_name }}
          </template>
        </el-table-column>

        <el-table-column label="联系人" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.contacts }}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系电话" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.tel }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="popup_view(scope.row.id)">查看</el-button>
            <el-button type="warning" size="small" @click="popup_edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="popup_delete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="result.total>0" :total="result.total" :page.sync="formdata.pageindex" :limit.sync="formdata.pagesize" @pagination="load_data" />
    </div>
    <div class="dialog_diy">
      <!-- 详情组件-->
      <el-dialog
        v-if="tmp.dialogType=='detail'&&tmp.dialogFormVisible"
        :close-on-click-modal="false"
        title="详情"
        :visible.sync="tmp.dialogFormVisible"
      >
        <detail ref="detail" :detail-id="tmp.detailId" @dialogClose="dialogClose" />
      </el-dialog>
      <!-- 新增修改组件-->
      <el-dialog
        v-if="tmp.dialogType=='edit'&&tmp.dialogFormVisible"
        class="aboutDialog"
        :close-on-click-modal="false"
        title="编辑"
        :visible.sync="tmp.dialogFormVisible"
      >
        <edit ref="edit" :detail-id="tmp.detailId" @dialogClose="dialogClose" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index' // 分页secondary package based on el-pagination
import edit from './project-edit'
import detail from './project-detail'
export default {
  components: {
    Pagination,
    edit,
    detail
  },
  data() {
    return {
      formdata: {
        pageindex: 1,
        pagesize: 20,
        org_id: '',
        grid_id: '',
        id: 0,
        noloading: 1
      },
      result: {
        total: 0,
        rows: []
      },
      tmp: {
        detailId: 0,
        dialogType: '',
        dialogFormVisible: false // 控制弹窗显示隐藏的值
      },
      ext: {
        org_listOptions: [],
        grid_listOptions: []
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        // console.log('id=', query.id)
        if (query) {
          this.formdata.id = query.id
        }
      },
      immediate: true
    }
  },
  created() {
    this.get_org_list()
    this.load_data()
  },
  methods: {
    //* *****************  通用业务  **************************
    load_data() {
      this.$api.project.projectlist(this.formdata).then(response => {
        // console.log('response', response)
        this.result = response.data
        this.deal_data()
      })
    },
    deal_data() {

    },
    search() {
      this.formdata.pageindex = 1
      this.load_data()
    },
    delete(id) {
      this.$api.project.projectdelete({ id: id }).then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.load_data()
      })
    },

    //* *****************  扩展业务  **************************
    get_org_list() {
      this.$api.comm.getorg_list().then(response => {
        // console.log('response', response)
        this.ext.org_listOptions = response.data
      })
    },
    org_change(value) {
      console.log('value', value)
      /* 为网格列表取值*/
      for (const item of this.ext.org_listOptions) {
        if (item.id === value) {
          // console.log('item', item)
          this.ext.grid_listOptions = item.grid_list
        }
      }
    },
    toRouter() {
      this.$router.push({
        path: '/region/buss/personlist',
        query: {
          id: 123
        }
      })
    },

    //* *****************  基础业务  **************************
    popup_view(id) { // 查看
      this.tmp.detailId = id
      this.tmp.dialogType = 'detail'
      this.tmp.dialogFormVisible = true
    },
    popup_edit(id) { // 新增||修改
      this.tmp.dialogType = 'edit'
      this.tmp.detailId = id
      this.tmp.dialogFormVisible = true
    },
    popup_delete(id) { // 删除
      this.$confirm('确定要删除此记录吗？删除后不可恢复！', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          this.delete(id)
        })
    },
    dialogClose() {
      this.resetTemp()
      this.tmp.dialogFormVisible = false
      this.load_data()
    },

    resetTemp() {
      this.tmp.detailId = 0
    }

  }
}

</script>
